<template>
  <div id="chuangxin">
    <div class="biaoqian">
      <van-tabs type="card" color="blue">
        <van-tab
          :title="item.name"
          size="10px"
          v-for="item in Biaoqian"
          :key="item.id"
        >
          <input type="text" :placeholder="item.icon" />
          <div class="query">
            <p>
              <b>{{ item.path }}</b>
            </p>
          </div>
          <div class="query2">
            <b>{{ item.path3 }}</b>
          </div>
          <div class="base">{{ item.path2 }}</div>
        </van-tab>
        <!-- <van-tab title="IP/网址">
          <input type="text" placeholder="请输入或粘贴要查询的IP或URL网址" />
          <div class="query">
            <p><b>提交举报</b></p>
          </div>
          <div class="query2">
            <b>二维码图片查询</b>
          </div>
          <div class="base">今日剩余可查询次数1次,本周剩余可查询3次</div>
        </van-tab>
        <van-tab title="QQ/微信">
          <input type="text" placeholder="请输入或粘贴要查询的QQ/微信账号" />
          <div class="query">
            <p><b>提交举报</b></p>
          </div>

          <div class="base">今日剩余可查询次数1次,本周剩余可查询3次</div>
        </van-tab> -->
      </van-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "a",
      Biaoqian: [],
    };
  },
  created() {
    this.getBiaoqian();
  },

  methods: {
    getBiaoqian() {
      axios({
        url: " http://localhost:3000/Biaoqiao",
      }).then((res) => {
        this.Biaoqian = res.data;
        console.log(this.Biaoqian, "Biaoqian");
      });
    },
  },
};
</script>

<style>
#chuangxin {
  height: 42rem;
  background-color: #3f56fa;
}
.biaoqian {
  width: 92%;

  margin-left: 15px;
  padding-top: 15px;
  border-radius: 15px;
  height: 21rem;
  background: rgb(231, 236, 247);
}
input {
  width: 92%;
  height: 6rem;

  margin: 15px;
  outline: none;
  border: 0;
}
.query p {
  width: 92%;
  height: 2.5rem;
  color: #fff;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: dodgerblue;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.query2 {
  width: 90%;
  height: 2.4rem;
  color: blue;
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.base {
  width: 90%;
  height: 3rem;
  margin: 10px auto;
  font-size: 14px;
  color: rgb(168, 167, 167);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
